<template>
  <view class="search clear">
    <view class="search-title flex justifyBetween">
      <view class="search-title-input clear">
        <view class="relative fl">
          <picker class="search-picker" @change="bindPickerChange" :value="index" :range="array">
              <view class="uni-input">{{array[index]}}</view>
          </picker>
          <i class="search-picker-up"></i>
        </view>
        <input class="search-input fl" placeholder="请输入您想查找的写字楼/楼盘名称"/>
      </view>
      <view class="search-title-chancel" @tap="clearHistory">取消</view>
    </view>

    <view class="search-history" v-show="false">
      <view class="flex justifyBetween">
        <view class="search-history-title">搜索历史</view>
        <view class="search-history-icon"  @tap="back"></view>
      </view>
      <view class="search-container clear">
        <view class="search-item fl">大望路SOHO写字楼</view>
        <view class="search-item fl">大望路SOHO写字楼</view>
        <view class="search-item fl">大望路SOHO写字楼</view>
      </view>
    </view>
    <view class="search-none" v-show="false">
      <image class="search-none-img" src="../../static/img/location-none.png"></image>
      <view class="search-none-text">很抱歉，没有查询到您的搜索</view>
    </view>

    <scroll-view scroll-y="true" class="search-content">
      <view class="search-content-item flex">
        <view  class="search-content-item-left">
          <image src="../../static/img/image123.png"></image>
        </view>
        <view class="search-content-item-right">
          <view class="search-content-item-text-one">乐成中心 整层 800平大 平层</view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-two">
            <span class="item-text">望京商圈</span>
            <span class="item-line">|</span>
            <span>纯写字楼</span></view>
          <view class="search-content-item-text-three">
            <span class="three-text">
              <span class="redText">8.62元</span>/天/㎡
            </span>
            <span>
              <span class="redText">2400元</span>/月  
            </span> 
          </view>
          <view class="line"></view>
        </view>
      </view>

      <view class="search-content-item flex">
        <view  class="search-content-item-left">
          <image src="../../static/img/image123.png"></image>
        </view>
        <view class="search-content-item-right">
          <view class="search-content-item-text-one">乐成中心 整层 800平大 平层</view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-three">
            <span class="three-text">
              <span class="redText">8.62元</span>/天/㎡
            </span>
            <span>
              <span class="redText">2400元</span>/月  
            </span> 
          </view>
          <view class="line"></view>
        </view>
      </view>

      <view class="search-content-item flex">
        <view  class="search-content-item-left">
          <image src="../../static/img/image123.png"></image>
        </view>
        <view class="search-content-item-right">
          <view class="search-content-item-text-one">乐成中心 整层 800平大 平层</view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-three">
            <span class="three-text">
              <span class="redText">8.62元</span>/天/㎡
            </span>
            <span>
              <span class="redText">2400元</span>/月  
            </span> 
          </view>
          <view class="line"></view>
        </view>
      </view>

      <view class="search-content-item flex">
        <view  class="search-content-item-left">
          <image src="../../static/img/image123.png"></image>
        </view>
        <view class="search-content-item-right">
          <view class="search-content-item-text-one">乐成中心 整层 800平大 平层</view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-three">
            <span class="three-text">
              <span class="redText">8.62元</span>/天/㎡
            </span>
            <span>
              <span class="redText">2400元</span>/月  
            </span> 
          </view>
          <view class="line"></view>
        </view>
      </view>

      <view class="search-content-item flex">
        <view  class="search-content-item-left">
          <image src="../../static/img/image123.png"></image>
        </view>
        <view class="search-content-item-right">
          <view class="search-content-item-text-one">乐成中心 整层 800平大 平层</view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-three">
            <span class="three-text">
              <span class="redText">8.62元</span>/天/㎡
            </span>
            <span>
              <span class="redText">2400元</span>/月  
            </span> 
          </view>
          <view class="line"></view>
        </view>
      </view>

      <view class="search-content-item flex">
        <view  class="search-content-item-left">
          <image src="../../static/img/image123.png"></image>
        </view>
        <view class="search-content-item-right">
          <view class="search-content-item-text-one">乐成中心 整层 800平大 平层</view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-two">
            <span class="item-text">面积：800㎡ </span>
            <span class="item-line">|</span>
            <span>面积：800㎡ </span></view>
          <view class="search-content-item-text-three">
            <span class="three-text">
              <span class="redText">8.62元</span>/天/㎡
            </span>
            <span>
              <span class="redText">2400元</span>/月  
            </span> 
          </view>
          <view class="line"></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      array: ['租写字楼', '售写字楼', '楼盘'],
      index: 0,
      history: []
    }
  },
  methods: {
    back() {
      	uni.navigateBack();
    },
    clearHistory() {

    }
  }
}
</script>

<style lang="scss" scoped>

.search {
  background: #fff;
  width: 100%;
  padding-left: 40upx;
  padding-right: 40upx;
  padding-top: 104upx;
}

.search-title-input {
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
  opacity: 1;
  border-radius: 8upx;
  padding: 24upx 30upx 20upx;
  width: 84%;
}

.search-picker {
  font-size: 24upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 40upx;
  height: 40upx;
  vertical-align: middle;
  margin-right: 33upx;
  position: relative;
}

.search-picker-up {
  display: inline-block;
  position: absolute;
  top: 62%;
  right: 10upx;
  width: 0px;               
  height: 0px;
  transform: translateY(-50%);
  border: solid #999;
  border-top-width: 12upx;
  border-left-width: 8upx;
  border-right-width: 8upx;
  border-bottom-color: transparent; 
  border-left-color: transparent;
  border-right-color: transparent;
}

.search-input{
  vertical-align: middle;
  line-height: 40upx;
  height: 40upx;
  color: #333;
  width: 72%;
  font-size: 24upx;
}

.search-title-chancel {
  display: block;
  font-size: 30upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #141821;
  opacity: 1;
  height: 90upx;
  line-height: 90upx;
}

.search-history-title {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 39upx;
  color: #333333;
  opacity: 1;
}

.search-history {
  margin-top: 120upx;
}

.search-history-icon {
  width: 30upx;
  height: 32upx;
  background: url('../../static/img/delete.png') no-repeat center center;
  background-size: cover;
}

.search-container {
  margin-right: -30upx;
  margin-top: 50upx;
}

.search-item {
  background: #F5F6FA;
  color: #666666;
  opacity: 1;
  border-radius: 30upx;
  padding: 10upx 30upx;
  margin-right: 30upx;
  margin-bottom: 30upx;
}

.search-item:first-child {
  background: #FF3A20;
  color: #fff;
}

.search-none {
  text-align: center;
  width: 100%;
  height: 80vh;
  position: relative;
  margin-top: 198upx;
  .search-none-img  {
    width: 443.52upx;
    height: 274.26upx;
  }

  .search-none-text {
    font-size: 24upx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 37upx;
    color: #858997;
    opacity: 1;
  }
}

.search-content {
  margin-top: 50upx;
  height: 80vh;

  .search-content-item {
    .search-content-item-left {
      margin-right: 30upx;
      image {
        width: 220upx;
        height: 220upx;
        border-radius: 5upx;
      }
    }

    .search-content-item-right {
      flex: 1;
      .search-content-item-text-one {
        font-size: 28upx;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 40upx;
        color: #333333;
        opacity: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 20upx;
      }
      .search-content-item-text-two {
        font-size: 20upx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 28upx;
        color: #999999;
        opacity: 1;
        .item-text {
          display: inline-block;
          width: 140upx;
          margin-bottom: 6upx;
        }
        .item-line {
          display: inline-block;
          margin-right: 40upx;
        }
      }
      .search-content-item-text-three {
        margin-top: 58upx;
        font-size: 20upx;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 28upx;
        color: #999999;
        opacity: 1;
        text-align: right;
        .three-text {
          display: inline-block;
          margin-right: 30upx;
        }

        .redText {
          color: #FF3A20;
          font-size: 28upx;
        }
      }

      .line {
        display: inline-block;
        width: 100%;
        height: 0;
        border-bottom: 1px solid #CBCBCB;
        opacity: 0.3;
        margin: 30upx 0;
      }
      
    }
  }
}
</style>